<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>

    <style type="text/css">
      div.rotator { position: relative; height: 200px; width: 300px; padding: 10px; background: #fff; }
      div.r1 { background: #ff1; }
      div.r1 p { margin-top: 20px; text-align: center; }
      div.navigation { position: absolute; top: 5px; right: 5px; }
      div.navigation div.current, div.navigation a { width: 12px; height: 12px; margin: 0 8px 0 0; float: left; overflow: hidden; }
      div.navigation a:hover { text-decoration: none; }
      div.navigation div.current { background: #c00; }
      div.navigation a { display: block; background: #ccc; }
      #introslide { background: #000; color: #eee; text-align: center; }
    </style>
    <script type="text/javascript" src="<?php echo $this->baseUrl().'/public/js/jquery-1.3.2.min.js'?>"></script>
    <script type="text/javascript">
      (function ($) {
        $.fn.fadeTransition = function(options) {
          var options = $.extend({pauseTime: 5000, transitionTime: 2000, ignore: null, delayStart: 0, pauseNavigation: false}, options);
          var transitionObject;

          Trans = function(obj) {
            var timer = null;
            var current = 0;
            var els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);
            $(obj).css("position", "relative");
            els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
            
            if (options.delayStart > 0) {
              setTimeout(showFirst, options.delayStart);
            }
            else
              showFirst();

            function showFirst() {
              if (options.ignore) {
                $(options.ignore, obj).fadeOut(options.transitionTime);
                $(els[current]).fadeIn(options.transitionTime);
              }
              else {
                $(els[current]).css("display", "block");
              }
            }

            function transition(next) {
              $(els[current]).fadeOut(options.transitionTime);
              $(els[next]).fadeIn(options.transitionTime);
              current = next;
              cue();
            };

            function cue() {
              if ($("> *", obj).length < 2) return false;
              if (timer) clearTimeout(timer);
              if (!options.pauseNavigation) {
                timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
              }
            };
            
            this.showItem = function(item) {
              if (timer) clearTimeout(timer);
              transition(item);
            };

            cue();
          }

          this.showItem = function(item) {
            transitionObject.showItem(item);
          };

          return this.each(function() {
            transitionObject = new Trans(this);
          });
        }

      })(jQuery);
    
      var page = {
        tr: null,
        init: function() {
          page.tr = $(".area").fadeTransition({pauseTime: 5000, transitionTime: 2000, ignore: "#introslide", delayStart: 2000});
          $("div.navigation").each(function() {
            $(this).children().each( function(idx) {
              if ($(this).is("a"))
                $(this).click(function() { page.tr.showItem(idx); return false; })
            });
          });
        },

        show: function(idx) {
          if (page.tr.timer) clearTimeout(page.tr.timer);
          page.tr.showItem(idx);
        }
      };

      $(document).ready(page.init);    
    </script>
  </head>
  <body>
    <div class="area">
      <div class="rotator" id="introslide">
        <p>SOROOOOOOSSSHHHHH</p>
      </div>
      <div class="rotator r1">
        <div class="navigation">
          <div class="current"></div>
          <a href="#">&nbsp;</a>
          <a href="#">&nbsp;</a>
          <a href="#">&nbsp;</a>
        </div>
        <p>This box contains some text</p>
      </div>
      <div class="rotator r2">
        <div class="navigation">
          <a href="#">&nbsp;</a>
          <div class="current"></div>
          <a href="#">&nbsp;</a>
          <a href="#">&nbsp;</a>
        </div>
        <img src="http://www.google.com.au/intl/en_au/images/logo.gif" alt="Google's Logo" />
      </div>
      <div class="rotator r3">
        <div class="navigation">
          <a href="#">&nbsp;</a>
          <a href="#">&nbsp;</a>
          <div class="current"></div>
          <a href="#">&nbsp;</a>
        </div>
        <ul>
          <li>This</li>
          <li>box</li>
          <li>contains</li>
          <li>an</li>
          <li>unordered</li>
          <li>list</li>
        </ul>
      </div>
      <div class="rotator r4">
        <div class="navigation">
          <a href="#">&nbsp;</a>
          <a href="#">&nbsp;</a>
          <a href="#">&nbsp;</a>
          <div class="current"></div>
        </div>
        <img src="./turkey.jpg" alt="Bush Turkey" />
      </div>
    </div>
  </body>
</html>
